<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-button v-show="!judgeStatus" type="primary" size="mini" @click="addPlan">关联优惠策略</el-button>
    </div>
    <span class="tariffList">已关联优惠策略</span>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="bold">基本信息</span>
      </div>
      <el-row>
        <el-col :span="24">
          <div class="watch">策略名称：{{ referential.name }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="watch">策略开始时间：{{ referential.beginTime }}</div>
        </el-col>
        <el-col :span="12">
          <div class="watch">策略结束时间：{{ referential.endTime }}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="watch">策略描述：{{ referential.description }}</div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="bold">策略触发条件</span>
      </div>
      <el-row>
        <el-col :span="24">
          <div class="watch">触发条件：{{ referential.triggeringConditions }}</div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card mar">
      <div slot="header" class="clearfix">
        <span class="bold">策略优惠形式</span>
      </div>
      <el-row>
        <el-col :span="24">
          <div class="watch">优惠形式：{{ referential.preferentialType }}</div>
        </el-col>
        <el-col v-if="referential.discountAmount" :span="24">
          <div class="watch">折价金额：{{ referential.discountAmount }} 元</div>
        </el-col>
        <el-col v-if="referential.discountRatio" :span="24">
          <div class="watch">折扣比例：{{ referential.discountRatio }} %</div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    refFer: {
      type: Object,
      default: () => {}
    },
    judgeStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      referential: {}
    }
  },
  watch: {
    refFer(val) {
      this.referential = val
    }
  },
  methods: {
    addPlan() {
      this.$emit('openConnect')
    }
  }
}
</script>

<style>
</style>
